{include file="public/mobileheader"}
<style>
    body{
        padding-top: 50px;
    }
    .mui-icon{
        display: inline-block;
        text-align: center;
    }
    .margin-top{
        margin-top: 12px;
    }

    .head-img {
        width: 50px;
        height: 50px;
        margin-right: 5px;
        border-radius: 2px;
    }
    .center-top{
        padding:5px 9px 2px;
        background: #ffffff;
        margin: 3px 2px;
    }
    .padding2{
        padding-top: 5px;
    }
    .art-title{
        width: 60%;
        overflow: hidden;
        color: black;
        white-space:nowrap;
        text-overflow:ellipsis;
    }
    .img-list{
        width: 30%;
        float: left;
        margin: 5px;
    }
</style>

    <body>
        <header class="mui-bar mui-bar-nav">
            <a onclick="window.history.go(-1)" class="mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">素材列表</h1>
        </header>

        <div style="padding-top: 0px;" class="mui-content">
            <div style="padding: 10px 10px;">
                <div id="segmentedControl" class="mui-segmented-control">
                    <a class="mui-control-item mui-active" href="#item1">图文并茂</a>
                    <a class="mui-control-item" href="#item2">图片素材</a>
                    <a class="mui-control-item" href="#item3">文字素材</a>
                </div>
            </div>

            <div>
                <div id="item1" class="mui-control-content mui-active">
                    {volist name = 'list1' id = 'vo'}
                        <div class="center-top">
                            <a href="{:url('articleDetail', array('media_id' => $vo['media_id'],'type' => 1,'uid' => $uid))}">
                                <span class="mui-icon mui-icon mui-icon-arrowright mui-pull-right margin-top"></span>
                                <img class="mui-media-object mui-pull-left head-img" src="{$vo['content']['news_item'][0]['thumb_url']}">
                                <div class="mui-media-body padding2">
                                    <div class="art-title">{$vo['content']['news_item'][0]['title']}</div>
                                    <p class='mui-ellipsis'><span style="color: #58a;margin-right: 9px;">浏览：66</span></p>
                                </div>
                            </a>
                        </div>
                    {/volist}
                </div>

                <div id="item2" class="mui-control-content">
                    {volist name="list2" id="vo2"}
                        <a href="{:url('imgDetail', array('id' => $vo2['id'],'uid' => $uid))}">
                            <img class="img-list" src="{$vo2['book_img']}"/>
                        </a>
                    {/volist}
                </div>

                <div id="item3" class="mui-control-content">
                    {volist name='list3' id='vo3'}
                        <div class="center-top">
                        <a href="{:url('imgDetail',array('id' => $vo3['id'],'uid' => $uid))}">
                            <span class="mui-icon mui-icon mui-icon-arrowright mui-pull-right margin-top"></span>
                            <div class="mui-media-body padding2">
                                <div class="art-title">{$vo3['title']}</div>
                                <p class='mui-ellipsis'><span style="color: #58a;">{$vo3['create_time']}</span></p>
                            </div>
                        </a>
                    </div>
                    {/volist}
                </div>
            </div>
        </div>

        {include file="public/nav"}
        {include file="public/mobilefooter"}
    </body>

</html>